<%--
  Created by IntelliJ IDEA.
  User: XYC
  Date: 2015/7/27
  Time: 15:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%-- jstl 标签 --%>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>

<link href="${css}/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- DataTables CSS -->
<link href="${css}/dataTables.bootstrap.css" rel="stylesheet">
<link href="${css}/bootstrap-datetimepicker.min.css"  rel="stylesheet" media="screen">
<!-- DataTables Responsive CSS -->
<link href="${css}/dataTables.responsive.css" rel="stylesheet">
<!-- button -->
<link rel="stylesheet" type="text/css" href="${assets}/button/css/btn.css"/>
<link href="${dean}/css/past.css" rel="stylesheet">
<html>
<style type="text/css">
    .form-group{
        height: 34px;
        vertical-align: middle;
        /*align*/
    }
    .form-group .control-label{
        margin-top:5px;
    }
    .displayData{
        display: none;
    }
    .dataTableWidth{
        width: 720px;;
    }
    .tableButtomMagrin{
        margin-bottom: 100px;
    }
</style>
<head>
    <title></title>
</head>
<body>
<div class="past" style="width: 750px;">
    <div class="disease tableButtomMagrin dataTableWidth">
        <div class="dataTableWidth" <%--class="panel-body"--%>>
            <div class="dataTable_wrapper">
                <table id="disease" class="table table-striped table-bordered table-hover" width="100%">
                    <thead>
                    <tr align="left">
                        <th><input id="disease_id" type="checkbox" onClick="isCheckedAll('disease')"></th>
                        <th>疾病名称</th>
                        <th>确诊时间</th>
                        <th>疾病描述</th>
                        <th style="display: none">治疗结果</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="surgery tableButtomMagrin dataTableWidth" >
        <div class="dataTableWidth" <%--class="panel-body"--%>>
            <div class="dataTable_wrapper">
                <table id="surgery" class="table table-striped table-bordered table-hover" width="100%">
                    <thead>
                    <tr align="left">
                        <th><input id="surgery_id" type="checkbox"></th>
                        <th>手术名称</th>
                        <th>手术时间</th>
                        <th>手术描述</th>
                        <th style="display: none">治疗结果</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="cl"></div>
    <div class="Trauma tableButtomMagrin dataTableWidth" >
        <div class="dataTableWidth" <%--class="panel-body"--%>>
            <div class="dataTable_wrapper">
                <table id="Trauma" class="table table-striped table-bordered table-hover" width="100%">
                    <thead>
                    <tr align="left">
                        <th><input id="Trauma_id" type="checkbox"></th>
                        <th>外伤名称</th>
                        <th>受伤时间</th>
                        <th>外伤描述</th>
                        <th style="display: none">治疗结果</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="transfusion dataTableWidth">
        <div class="dataTableWidth" <%--class="panel-body"--%>>
            <div class="dataTable_wrapper">
                <table id="transfusion" class="table table-striped table-bordered table-hover" width="100%">
                    <thead>
                    <tr align="left">
                        <th><input id="transfusion_id" type="checkbox"></th>
                        <th>输血名称</th>
                        <th>输血时间</th>
                        <th>输血描述</th>
                        <th style="display: none">治疗结果</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<%--<div class="panel-body">
    <div class="dataTable_wrapper">
        <table id="example" class="table table-striped table-bordered table-hover" width="100%">
            <thead>
            <tr align="left">
                <th><input id="all_id" type="checkbox"></th>
                <th>过敏史种类</th>
                <th>过敏原</th>
                <th>发病时间</th>
                <th>发病原因</th>
                <th>治疗描述</th>
                <th>id值</th>
                <th style="display: none">id值</th>
                &lt;%&ndash;<th>操作</th>&ndash;%&gt;
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>--%>

<!-- 新增 -->
<div class="modal fade" id="addModal">
    <div class="modal-dialog" style="width:350px; height: 400px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
                <h4 class="modal-title">疾病史新增</h4>
            </div>
            <div class="modal-body">
                <%--<iframe id="addIframe" name="addIframe" width="100%" height="100%" frameborder="0"></iframe>--%>
                <div class="form-group" style="  height: 30px;">
                    <label class="col-sm-4 control-label" style="margin-top: 7px;">疾病名称</label>
                    <div class="col-sm-8">
                        <select id="diseaseName" class="form-control">
                            <%--<option value=""></option>--%>
                            <c:forEach items="${disease}" var="BaseDictListDate">
                                <option value="${BaseDictListDate.code}" text="${BaseDictListDate.name}">${BaseDictListDate.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="form-group" style="  height: 30px;">
                    <label class="col-sm-4 control-label" style="margin-top: 7px;">疾病日期</label>
                    <div class="col-sm-8">
                        <div id="gotDate" class="input-group date form_date col-md-5" style="width: auto"  data-date-format="yyyy-mm-dd">
                            <input class="form-control" size="12" type="text" value="" readonly>
                            <span class="input-group-addon">
                                 <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group"  style="  height: 30px;">
                    <label class="col-sm-4 control-label" style="margin-top: 7px;">疾病描述</label>
                    <div class="col-sm-8">
                        <input type="email" class="form-control" id="info" name="info"
                               placeholder="请输入相关描述">
                    </div>
                </div>
                <div class="form-group" style="  height: 30px;">
                    <label class="col-sm-4 control-label" style="margin-top: 7px;">治疗结果</label>
                    <div  class="col-sm-8">
                        <select id="treatmentoutcome" class="form-control">
                            <c:forEach items="${treatmentoutcome}" var="BaseDictListDate">
                                <option value="${BaseDictListDate.code}" text="${BaseDictListDate.name}">${BaseDictListDate.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
               <%-- <div class="form-group">
                    <label class="col-sm-2 control-label">过敏原</label>
                    <div class="col-sm-3">
                        <select id="allergen" class="form-control">
                            <option value=""></option>
                            &lt;%&ndash;<c:forEach items="${allergen}" var="BaseDictListDate">&ndash;%&gt;
                                &lt;%&ndash;<option value="${BaseDictListDate.code}">${BaseDictListDate.name}</option>&ndash;%&gt;
                            &lt;%&ndash;</c:forEach>&ndash;%&gt;
                        </select>
                    </div>
                </div>--%>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit_add" >保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改 -->
<%--<div class="modal fade" id="updateModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
                <h4 class="modal-title">过敏史修改</h4>
            </div>
            <div class="modal-body">
                <iframe id="updateIframe" name="updateIframe" width="100%" height="100%" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit_update">保存</button>
            </div>
        </div>
    </div>
</div>--%>

<%--<script type="text/javascript" src="${js}/jquery.min.js" charset="UTF-8"></script>--%>
<%--<script src="${js}/jquery.min.js"></script>--%>
<script src="${dean}/js/baseDell.js"></script>
<script src="${dean}/js/jquery-1.11.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="${js}/bootstrap.min.js"></script>
<!-- DataTables JavaScript -->
<script src="${js}/jquery.dataTables.js"></script>
<script src="${js}/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="${js}/bootstrap-dateTime/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="${js}/bootstrap-dateTime/locales/bootstrap-datetimepicker.zh-CNxyc.js" ></script>
<script src="${js}/bootbox.js"></script>
<!-- button -->
<script src="${assets}/button/js/btn.js"></script>
<script type="text/javascript">
    var table = new Object();
    var buttonType;
    var selectedRow;
    var idCardData ;
    var idData;
    var tableBoxShowDict = new Object;
    var diseasTypeName;
//    var parentWindowData= parent.window;
    var parentWindowData= parent.top;
    function initDateTime(){
        $("#gotDate").datetimepicker({
            language:  'zh-CN',
            weekStart:  0,
            todayBtn: true,
            autoclose:  1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
    }

    function initTable(TableIdData) {
        table[TableIdData] = $("#"+TableIdData).DataTable({
            "dom": "<'row'<'col-xs-2'l><'#"+TableIdData+"tool.col-xs-10'><'col-xs-6'f>r>" +
            "t" +
            "<'row'<'col-xs-6'i><'col-xs-6'p>>",
            "bFilter": false,//去掉搜索框
            "bAutoWidth": true, //自适应宽度
            "aLengthMenu":[5,10,20],
            "iDisplayLength":5,
            "sPaginationType": "full_numbers",
//                "bDestroy" : true,
//              "asStripeClasses": [ 'strip1', 'strip2', 'strip3' ],//设置斑马条（奇偶行）的css class
            "ordering": false,//是否允许Datatables开启排序
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "${ctx}/web/patient/pastHistory/"+TableIdData+"/ShaoData?idCard=${idCard}",
            "sAjaxDataProp": "dataList",//查询后，返回的集合
//            "scrollY": "200px",//table 高度
//            "scrollCollapse": false, //禁止表格内容不足时回缩,
            "fnServerData": function (sSource, aoData, fnCallback) {  //查询条件  用来自定义函数
                aoData.push(
                        {"name": "hospName", "value": $("#hospName").val()}
                );
                $.ajax({
                    "dataType": 'json',
                    "url": sSource,
                    "type": 'post',
                    "data": aoData,
                    "success": fnCallback,
                    "complete":function(data){
                        parent.window.iFrameHeight("patientBody",'766');
                       /* var diseasObject=["#disease","#surgery","#Trauma","#transfusion"]
                        var countHeight=788;
                        for(var i=0;i<diseasObject.length;i++){
                            var dataRowNum = $(diseasObject[i]+" input[type='checkbox']").length-1;
                            if(dataRowNum==0){
                                dataRowNum=1;
                            }
                            countHeight += dataRowNum*48;
                        }
//                        alert($("#disease").height);
//
//                        alert($("#disease").css("height"));
//                        var dataRowNum = $(".past input[type='checkbox']").length ;
//                        var countHeight=788+dataRowNum*45;
                        parent.window.$("#patientBody").css("height",countHeight);*/
                    }
                });

            },
            "aoColumns": [
                {
                    "targets": -1,
                    "data": null,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html('' +
                        '<input name="id" value="' + oData.id + '" type="checkbox">' +
                        ''); /* onClick="isCheckedAll(\''+TableIdData+'\')"*/
                    },
                    "className":"check"
//                    "width":"50px"
                }, {
                    "mDataProp": "diseaseOfString",
                    "sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
                    'sClass': "text-center"
                }, {
                    "mDataProp": "gotDateOfString",
                    "sDefaultContent" : ""
                }, {
                    "mDataProp": "info",
                    "sDefaultContent" : ""
                }, {
                    "mDataProp": "treatmentoutcome",
                    "sDefaultContent" : "",
                    "className":"displayData"
                }
            ],
            "oLanguage": {
                "sProcessing": "正在加载中......",
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "没有数据！",
                "sEmptyTable": "无数据存在！",
                "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                "sInfoEmpty": "显示0到0条记录",
                "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                //"sSearch" : "搜索", 全局搜索字段
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "末页"
                }
            },
            initComplete: function () {
                $("#"+TableIdData+"tool").append('<button id="'+TableIdData+'delete_butt" type="button" class="btn btn-outline btn-success" style="float:right;">删除</button>');
                $("#"+TableIdData+"tool").append('<button id="'+TableIdData+'update_butt" type="button" class="btn btn-outline btn-success" style="float:right;">修改</button>');
                $("#"+TableIdData+"tool").append('<button id="'+TableIdData+'add_butt" type="button" class="btn btn-outline btn-success" style="float:right;">新增</button>');
                $("#"+TableIdData+"add_butt").click( function(){toAdd(TableIdData)});
                $("#"+TableIdData+"update_butt").click( function(){toUpdate(TableIdData)});
                $("#"+TableIdData+"delete_butt").click( function(){toDelete(TableIdData)});

                $('#'+TableIdData+' tbody ').on("click","tr" ,function () {
                    $(this).toggleClass('active');
                    if($(this).hasClass('active')){
                        $(this).children('td').children("input").prop("checked","checked");
                    }else{
                        $(this).children('td').children("input").prop("checked","");
                    }
                });
                /*$('#'+TableIdData+' tbody tr ').click( function () {
                    $(this).toggleClass('active');
                    if($(this).hasClass('active')){
                        $(this).children('td').children("input").prop("checked","checked");
                    }else{
                        $(this).children('td').children("input").prop("checked","");
                    }
                });*/
            }/*,
            stateSave: true,
            stateLoaded: function(){
                alert(TableIdData);
            }*/
        });
    }

    //新增
    function toAdd(TableIdData) {
//        alert(TableIdData)
//        $("#addModal .modal-title").html("过敏史新增");
        changeDialogShow(TableIdData,"新增");
        diseasTypeName = TableIdData;
        <%--$("#addIframe").attr("src", "${URL_ADM_HOSP_TOADD}");//新增地址--%>
//        $('#addModal').modal({show: true, backdrop: 'static'});
        buttonType = "add";
        var topValue =$(parent.top).height() -400;
        if(topValue>0)
        {
            $(".modal-content").css("margin-top",topValue/2);
        }
        parentWindowData.$("#dialog-Show").html($('#addModal').html());
        parentWindowData.$("#dialog-Show").modal({show: true, backdrop: 'static'});

        parentWindowData.initDateTime("#gotDate");
        parentWindowData.$("#dialog-Show input").prop('value','');
        parentWindowData.$("#dialog-Show select").prop('value','');
        parentWindowData.$("#dialog-Show #submit_add").click(function(){
            submitData();
        })
    }

    //修改
    function toUpdate(TableIdData) {
//        $("#addModal .modal-title").html("过敏史修改");
        changeDialogShow(TableIdData,"修改");
        diseasTypeName = TableIdData;
        var checkedArray = getCheckedArray(TableIdData);
        if (checkedArray.length != 1) {
            parentWindowData.bootbox.dialog({
                message: "请选中一项数据",
                buttons: {
                    OK: {
                        label: "确定",
                        className: "btn-primary"
                    }
                }
            });
            return false;
        }
        parentWindowData.$("#dialog-Show").html($('#addModal').html());
        parentWindowData.$('#dialog-Show').modal({show: true, backdrop: 'static'});
        buttonType = "edit";
        var topValue =$(parent.top).height() -400;
        if(topValue>0)
        {
            $(".modal-content").css("margin-top",topValue/2);
        }
        parentWindowData.$("#dialog-Show input").prop('value','');
        parentWindowData.$("#dialog-Show select").prop('value','');
        var rowData=$("input[name='id'][value='"+checkedArray[0]+"']").parents('tr').find('td');
        parentWindowData.$("#diseaseName option[text="+rowData[1].textContent+"]").prop("selected", true);

        parentWindowData.$("#gotDate input").val(rowData[2].textContent);
        parentWindowData.$("#info").val(rowData[3].textContent);
        parentWindowData.$("#treatmentoutcome option[value="+rowData[4].textContent+"]").prop("selected", true);
        idData=checkedArray[0];
        parentWindowData.$("#dialog-Show #submit_add").click(function(){
            submitData();
        });
    }

    function submitData(){
        var data=new Object();
        data["disease"]= parentWindowData.$("#diseaseName").val();
//        data["allergen"]=parentWindowData.$("#allergen").val();
        data["gotDateOfString"]=parentWindowData.$("#gotDate input").val();
        data["info"]=parentWindowData.$("#info").val();
        data["treatmentoutcome"]=parentWindowData.$("#treatmentoutcome").val();
        data["pastMethod"]=diseasTypeName;
        data["opp"]=buttonType;
        if(buttonType=="edit"){
            data["id"]=idData;
        }
        data["idCard"]= idCardData
        jQuery.ajax({
            url :'${ctx}/web/patient/pastHistory/SaveData',
            type : "post",
            data:data,
            cache : false,
            dataType : "json",
            success : function(data){
                alert("提交完成");
                parentWindowData.$('#dialog-Show').modal('hide');
                refreshTable(diseasTypeName);
            }
        });
    }

    //删除
    function toDelete(TableIdData) {
        var checkedArray = getCheckedArray(TableIdData);
        var ids = "";
        if (checkedArray.length == 0) {
            parentWindowData.bootbox.dialog({
                message: "请选中至少一项数据",
                buttons: {
                    OK: {
                        label: "确定",
                        className: "btn-primary"
                    }
                }
            });
            return false;
        } else {
            for (var i = 0; i < checkedArray.length; i++) {
                ids += checkedArray[i] + "-";
            }
            ids = ids.substring(0, ids.length - 1);
        }
        var data=new Object();
        data["opp"]="del";
        data["idData"]=ids;
        parentWindowData.bootbox.dialog({
//                message: "医院："+rowData.hospName,
//                title: "确定删除此项？",
            message: "确定删除此项？",
            buttons: {
                OK: {
                    label: "确定",
                    className: "btn-primary",
                    callback: function () {
                        delRowData(data,TableIdData);
                    }
                },
                Cancel: {
                    label: "取消",
                    className: "btn-default"
                }
            }
        });
    }

    function delRowData(data,TableIdData){
        jQuery.ajax({
            url :'${ctx}/web/patient/pastHistory/SaveData',
            type : "post",
            data:data,
            cache : false,
            dataType : "json",
            success : function(data){
                alert("提交完成");
//                parentWindowData.$('#dialog-Show').modal('hide');
                refreshTable(TableIdData);
            }
        });
    }

    //多选按钮
    $("#all_id").click(function () {
        if (this.checked) {
            $("input[name='id']").each(function () {
                $(this)[0].checked = true;
            });
        } else {
            $("input[name='id']").each(function () {
                $(this)[0].checked = false;
            });
        }
    });

    //判断是否已经全选
    function isCheckedAll(TableIdData) {
        var decSelectAll = false;
        if ($("#" + TableIdData + " thead input").prop("checked")) {
            decSelectAll = true;
        }

        $("#" + TableIdData + " tbody tr").each(function () {
            if ($(this).hasClass('active') && !decSelectAll) {
                $(this).toggleClass('active');
                $(this).children('td').children("input").prop("checked", "");
            } else if (!$(this).hasClass('active') && decSelectAll) {
                $(this).toggleClass('active');
                $(this).children('td').children("input").prop("checked", "checked");
            }
        });
    }

    function getCheckedArray(TableIdData) {
        var checkedArray = [];
        $("#"+TableIdData+" input[name='id']").each(function () {
            if (this.checked) {
                checkedArray.push(this.value);
            }
        });
        return checkedArray;
    }

    //刷新table数据
    function refreshTable(TableIdData) {
        table[TableIdData].ajax.reload();

        //重置全选按钮
        $("#"+TableIdData+"_id")[0].checked = false;
    }

    $(document).ready(function () {

        idCardData= '${idCard}';
        initTable("disease");
        initTable("surgery");
        initTable("Trauma");
        initTable("transfusion");
//        initButtonLine("disease");disease
        initTableShowData();
        initDateTime();
        $('#disease').on('stateLoaded.dt', function () {
            alert("xyc");
        } ).dataTable();
    });

    function initTableShowData(){
        tableBoxShowDict["disease"]=["疾病信息","疾病名称","疾病日期","疾病描述","治疗结果"];
        tableBoxShowDict["surgery"]=["手术信息","手术名称","手术日期","手术描述","手术结果"];
        tableBoxShowDict["Trauma"]=["外伤信息","外伤名称","受伤日期","外伤描述","治疗结果"];
        tableBoxShowDict["transfusion"]=["输血信息","输血名称","输血日期","输血描述","输血结果"];
    }

    function changeDialogShow(dataTable,dialogType){
        $("#addModal .modal-title").html(tableBoxShowDict[dataTable][0]+dialogType);
        $("#diseaseName").parent().prev().html(tableBoxShowDict[dataTable][1]);
        $("#gotDate").parent().prev().html(tableBoxShowDict[dataTable][2]);
        $("#info").parent().prev().html(tableBoxShowDict[dataTable][3]);
        $("#treatmentoutcome").parent().prev().html(tableBoxShowDict[dataTable][4]);
    }

</script>
</body>
</html>
